<template>
 <div  style="position: relative" >
   <a style="float: left;left: 60px;top: 20px;margin: 15px;" href="/"><img  src="../assets/images/logo2.png" alt=""></a>
   <el-menu :default-active="activeIndex" style="float:left;margin-left: 20px" mode="horizontal" @select="handleSelect">
     <el-menu-item index="1">首页</el-menu-item>
     <el-menu-item index="2-1">学习中心</el-menu-item>
     <el-menu-item index="2-2">招聘</el-menu-item>
     <el-menu-item index="2-3">项目营地</el-menu-item>
     <el-menu-item index="3" >消息中心</el-menu-item>
     <el-menu-item index="4">订单管理</el-menu-item>
   </el-menu>
   <div style="width: 300px;float:left;margin-top: 10PX;left: 800px;position: absolute">
     <el-input placeholder="请输入内容" v-model="input1">
       <el-button slot="append" icon="el-icon-search"></el-button>
     </el-input>
   </div>
   <a href="/content/quill">
   <el-button style="width: 80.28px;height: 42px; position: absolute; top: 10px;line-height: 10px;text-align: center; right: 150px; float: right" type="primary" @click="handleSubmit">草稿箱</el-button>
   </a>
   <div style="float: right;margin-top: 10px;right: 10px;position: absolute">
     <el-popover
         placement="top-start"
         width="200"
         trigger="hover">
       <div slot="reference">
         <Avator/>
       </div>
       <el-menu
           default-active="2"
           class="el-menu-vertical-demo">
         <el-menu-item index="1-1">个人中心</el-menu-item>
         <el-menu-item index="1-2">退出登录</el-menu-item>
       </el-menu>
     </el-popover>
   </div>
 </div>
</template>

<script>
import router from "@/router";
import Avator from "@/components/Avator.vue";
export default {
  name: "Header",
  components:{
    Avator
  },
  data:function (){
    return{
      // user:localStorage.user?JSON.parse(localStorage.user):null,
      activeIndex: '1',
      input1:"",
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSubmit(){
      router.push("/content/quill")
    }
  },

};
</script>

<style scoped>
/*.indexHeader img{*/
/* float: left;left: 60px;top: 20px;margin: 15px;*/
/*}*/
/*.indexHeader .el-menu-demo{*/
/*  margin-left: 20px;*/
/*  float: left;*/
/*}*/
</style>